﻿@{
    ViewBag.Title = "Machines";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<label>Hub: </label>
<select name="AvalibleHubs" id="Hubs" class="gridText">
        @foreach (var dow in ViewBag.machines[0].AvalibleHubs)
        {
            <option value="@dow.Name">@dow.Name</option>                                
        }
</select>
&nbsp&nbsp&nbsp&nbsp
<input type="checkbox" />
<label>Active Machines Only</label>
<div class="first">
    <div class="second" style="margin-left:17.0em; ">
        <table id="marbleTable" class="table">
            <thead>
                <th class="headerCol" style="top:24px">ID</th>
                <th class="headerCol" style="left:55px;top:24px">Name</th>
                <th>Game Name</th>
                <th>Hub Name</th>
                <th>Hub Address</th>
                <th>Machine Address</th>
                <th>Effective Machine Address</th>
                <th>Active</th>
                <th>Reader Type</th>
                <th>Software Version</th>
                <th>Ticket Mode</th>
                <th>VIP Price</th>
                <th>TicketAllowed</th>
                <th>PurchasePrice</th>
                <th>Note</th>
                <th>Theme</th>
                <th>LastUpdatedBy</th>
                <th>LastUpdatedDate</th>
                <th>Configure</th>
            </thead>
            @foreach (var item in ViewBag.machines)
            {  
                <tr onchange="UpdatedList(this)">
                    <td class="headerCol">@item.Id  </td>
                    <td class="headerCol" style="left:55px">
                        <input type="text" value="@item.Name" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.GameName" class="gridText" />
                    </td>
                    <td>
                        <select name="AvalibleHubs" id="AvalibleHubs" class="gridText">
                            @foreach (var dow in item.AvalibleHubs)
                            {
                                if (@item.HubName == @dow.Name)
                                {
                                <option value="@dow.Name" selected>@dow.Name</option>
                                }
                                else
                                {
                                <option value="@dow.Name">@dow.Name</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.HubAddress" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.MachineAddress" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.EffectiveMachineAddress" class="gridText" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.Active ? "checked='checked'" : "") value="@item.Active" />
                    </td>
                    <td>
                        <select name="AvalibleReaders" id="AvalibleReaders" class="gridText">
                            @foreach (var dow in item.AvalibleReaders)
                            {
                                if (@item.ReaderType == @dow.Value)
                                {
                                    <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                    <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.SoftwareVersion" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.TicketMode" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.VIPPrice" class="gridText"/>
                    </td>
                      <td>
                        <input type="checkbox"  @(item.TicketAllowed ? "checked='checked'" : "") value="@item.TicketAllowed" />
                    </td>
                    <td>
                        <input type="text" value="@item.PurchasePrice" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.Notes" class="gridText"/>
                    </td>
                    <td>
                        <select name="AvalibleThemes" id="AvalibleThemes" class="gridText">
                            @foreach (var dow in item.AvalibleThemes)
                            {
                                if (@item.Theme == @dow.Value)
                                {
                                    <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                    <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy" class="gridText" disabled/>
                    </td>
                    <td>
                        <button onClick="ConfigureMachine(@item.Id)">-</button>
                    </td>
                </tr>  
            }
        </table>
    </div>
</div>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveMachines()">Save</button>
    <a href="#" class="btn btn-primary btn-md" role="button" onclick="AddMachine()">Add</a>
</div>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').collapse({
            toggle: false
        });
    })
    function AddMachine() {
        var hubNames = '';
              @foreach (var dow in ViewBag.machines[0].AvalibleHubs)
              {
                 @: hubNames = hubNames + '<option value="@dow.Name">@dow.Name</option>';
              }
        hubNames = hubNames + '</select></td>';
        var readerTypes = '';
              @foreach (var dow in ViewBag.machines[0].AvalibleReaders)
              {
                 @: readerTypes = readerTypes + '<option value="@dow.Value">@dow.Value</option>';
              }
        readerTypes = readerTypes + '</select></td>';
        var themes = '';
              @foreach (var dow in ViewBag.machines[0].AvalibleThemes)
              {
                 @: themes = themes + '<option value="@dow.Value">@dow.Value</option>';
              }
        themes = themes + '</select></td>';

        var newRow = '<tr onchange=UpdatedList(this)> ' +
        '<td class="headerCol"> <a href="#"></a> </td> ' +
        ' <td class="headerCol" style="left:55px"> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <select name="AvalibleHubs" id="AvalibleHubs">' + hubNames +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <select name="AvalibleReaders" id="AvalibleReaders">' + readerTypes +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <input type="text" value="" class="gridText"/>  </td>' +
        '<td> <select name="AvalibleThemes" id="AvalibleThemes">' + themes;
        $('#marbleTable tr:last').after(newRow);
    }
    function SaveMachines() {
        var machines = [];
        var table = document.getElementById('marbleTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                machines.push({
                    Id: table.rows[r].cells[0].innerHTML,
                    Name: table.rows[r].cells[1].children[0].value,
                    GameName: table.rows[r].cells[2].children[0].value,
                    HubName: table.rows[r].cells[3].children[0].value,
                    HubAddress: table.rows[r].cells[4].children[0].value,
                    MachineAddress: table.rows[r].cells[5].children[0].value,
                    EffectiveMachineAddress: table.rows[r].cells[6].children[0].value,
                    Active: table.rows[r].cells[7].children[0].checked,
                    ReaderType: table.rows[r].cells[8].children[0].value,
                    SoftwareVersion: table.rows[r].cells[9].children[0].value,
                    TicketMode: table.rows[r].cells[10].children[0].value,
                    VIPPrice: table.rows[r].cells[11].children[0].value,
                    TicketAllowed: table.rows[r].cells[12].children[0].checked,
                    PurchasePrice: table.rows[r].cells[13].children[0].value,
                    Notes: table.rows[r].cells[14].children[0].value,
                    Theme: table.rows[r].cells[15].children[0].value,
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateMachines", "Game")',
            data: JSON.stringify({ machines: machines }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(x) {
        if (!updatedArray.includes(x.rowIndex)) {
            updatedArray.push(x.rowIndex);
        }
    }
    function ConfigureMachine() {

    }
</script>

